﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>Web前端学习大纲|Web开发技术-山东师范大学历山学院</title>
    <link href="css/globle.css" rel="stylesheet" />
    <link href="css/introduce.css" rel="stylesheet" />
    <link href="css/project.css" rel="stylesheet" />
    <script src="js/index.js"></script>
    <script src="js/designe.js"></script>

   
</head>

<body>

    <div id="top">

        <div id="top_inner">
            <span class="smalltitle">欢迎进入<font color="#f10215">历山学院课程中心</font></span>

            <ul>
                <li>
                    <a href="#">你好，请登录</a>
                </li>
                <li>
                    <a href="#">我的课程</a>
                </li>
                <li>
                    <a href="#">校园内网</a>
                </li>
                <li>
                    <a href="#">学院新闻</a>
                </li>
                <li>
                    <a href="http://www.lsxy-edu.com/index.html">学校首页</a>
                </li>
                <li>
                    <a href="#">网站导航</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <img src="img/logo.jpg" width="100" />
        <div id="search_box">
            <input id="search" type="text" placeholder="请搜索课程名或者老师" /><input id="btnsearch" type="button" />
            <div id="hot">
                <ul>
                    <li>
                        <a href="#" style="color: #F10215;">Web设计</a>
                    </li>

                    <li>
                        <a href="#">Java 编程</a>
                    </li>
                    <li>
                        <a href="#">SQL 数据库</a>
                    </li>
                    <li>
                        <a href="#">数据结构</a>
                    </li>
                    <li>
                        <a href="#">计算机组成原理</a>
                    </li>
                    <li>
                        <a href="#">多媒体课程设计</a>
                    </li>

                </ul>

            </div>
        </div>
        <div id="qrcode">
            <a href="javascript:void" id="phone_link">用手机访问</a>
            <img src="img/phone.png" />
        </div>
        <div id="qrcode_block">
            <img src="img/erweima.png" id="img_qrcode" height="100" />
        </div>
    </div>
    <div id="menu">
        <ul id="menu_tools">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li>
                <a href="teacher.html">主讲教师</a>
            </li>
            <li>
                <a href="introduce.html">实践大纲</a>
            </li>
            <li class="active">
                <a href="project.html">实践项目</a>
            </li>
            <li>
                <a href="design.html">课程设计</a>
            </li>
            <li>
                <a href="source.html">教学资源</a>
            </li>
            <li>
                <a href="suggest.html">意见反馈</a>
            </li>
        </ul>
    </div>

    <div id="content">
        <div class="inner_nav">
            <a href="index.html">首页</a>&gt;
            <a href="index.html">网页设计</a>&gt;
            <a href="project.html">实践项目</a>
        </div>


        <div class="teacher_left">
            <h3 align="center" style="margin-top: 20px;">Web前端开发技术一实践项目</h3>

            <div id="subtime">
                2016-07-21 17:32:45
            </div>
            <div class="label">
                标签：<a href="#">Web前端</a><a href="#">Web开发</a><a href="#">Web开发</a>
            </div>

            <div style="padding-top:20px;">
                <h3>一、实训目的及意义</h3>
                <p class="intro_p">
                    Web前端开发技术是一门计算机专业基础课程，具有应用性强、实践要求高的特点，是web开发的基础性技术。主要包括HTML、CSS、Javascript、DOM、BOM、AJAX等技术手段，用于解决web开发中的网页布局方面的问题。
                </p>
                <p class="intro_p">
                    本实践环节设置要求学生利用web开发技术的上述技术手段，使用Dreamweaver、photoshop等工具软件，使用HTML、CSS、Javascript等语言工具实现简单综合网站的开发。达到巩固提高、以练促学的教学目的。
                </p>
                <p class="intro_p">
                    通过此次实训，使学生基本了解web开发流程，掌握web前端设计技巧，熟悉web前端开发语言的应用，为以后从事web前端开发铺路。
                </p>
                <h3>二、实训安排</h3>
                <p class="intro_p">
                    本课程实训时间安排为第十七、十八周，共18个学时，记1学分。具体时间安排为第十七周周四1-8节、周五1-8节、第十八周周一上午1-4节、周二1-8节、周三1-8节。期中十八周周三下午为集中答辩时间，不再安排实训内容。
                </p>
                <p class="intro_p">
                    上机地点为综合楼306。
                </p>
                <h3>三、实训要求</h3>
                <p class="intro_p">
                    实训要求以山东师范大学历山学院为原型，自行选择某门专业课程，参照实践教材课程设计题目一，为其设计一个功能齐备的教学网站。具体要求如下：
                </p>
                <p class="intro_p">
                    （1）、该网站至少包含网站首页、主讲教师介绍、实践大纲、实践项目、课程设计介绍、教学资源等几个页面，网站风格保持一致，并能适合所选课程功能特点。
                </p>
                <p class="intro_p">
                    （2）、页面布局合理、美观，尽可能的利用多媒体手段展现网站内容的丰富性，所用素材符合原型特点。
                </p>
                <p class="intro_p">
                    （3）、外观设计尽量采用样式设计，应尽量避免单纯靠标记属性实现。
                </p>
                <p class="intro_p">
                    HTML5+CSS3，响应式原理及布局，Bootstrap,Less+Sass预处理语言，微信WeUI，实战项目
                </p>
                <p class="intro_p">
                    （4）、功能方面至少要有显示当前日期时间、不当操作信息提示、获取表单内容并显示等，功能的实现要贴合实际，符合课程的性质特点。


                </p>
                <h3>四、作品提交</h3>
                <p class="intro_p">
                    作品上交要求实训报告和源文件同时上交。实训报告以word文档形式编辑，要求排好版适合打印，封皮及排版格式附后。
                </p>

                <p class="intro_p">
                    实训报告内容要求：
                </p>
                <p class="intro_p">
                    1、分组及成员任务分配情况
                    说明此次实训有哪几位同学联合完成，每位同学在此次实训中负责那一部分任务。
                </p>
                <p class="intro_p">
                    （2）、页面布局合理、美观，尽可能的利用多媒体手段展现网站内容的丰富性，所用素材符合原型特点。
                </p>
                <p class="intro_p">
                    （3）、外观设计尽量采用样式设计，应尽量避免单纯靠标记属性实现。
                </p>
                <p class="intro_p">
                    （4）、功能方面至少要有显示当前日期时间、不当操作信息提示、获取表单内容并显示等，功能的实现要贴合实际，符合课程的性质特点。
                </p>
                <p class="intro_p">
                    1、分组及成员任务分配情况
                    说明此次实训有哪几位同学联合完成，每位同学在此次实训中负责那一部分任务。
                </p>
                <h3>五、评分标准</h3>

                <p class="intro_p">
                    根据教学计划安排，web开发技术一课程设计作为专业课采取考核方式进行期末评判。课程实训作为本课程最终考核手段，所得分数对应于本课程期末成绩，本着对学生学习成果负责，评分公平公正的原则，特对web开发技术一结课实训评分标准作出以下规定：

                </p>
                <p class="intro_p">
                    <table>
                        <tr>
                            <td>评分项目</td>
                            <td>分值分配（100分）</td>
                        </tr>
                        <tr>
                            <td>完成基本内容</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>功能实现</td>
                            <td>20</td>
                        </tr>
                        <tr>
                            <td>创新能力</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>实训报告</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td>出勤情况</td>
                            <td>10</td>
                        </tr>
                    </table>
                </p>


            </div>

        </div>
        <div class="teacher_right">
            <ul class="list_right">
                <li class="list_title">相关课程大纲</li>
                <li><a href="#">JavaScript大纲</a></li>
                <li><a href="#">Java程序设计大纲</a></li>
                <li><a href="#">C语言程序设计大纲</a></li>
                <li><a href="#">PhotoShop设计大纲</a></li>
                <li><a href="#">Android开发大纲</a></li>

            </ul>
            <ul class="list_right" style="margin-top: 0;">
                <li class="list_title">热点推荐</li>
                <li><a href="#">刘曙光到我校调研指导节...</a></li>
                <li><a href="#">聊城大学东昌学院到我校交流访问</a></li>
                <li><a href="#">我校赴韩国大真大学考察交流</a></li>
                <li><a href="#">人文学院举办优秀学子分享会</a></li>
                <li><a href="#">我校举行纪念“一二九”运动系...</a></li>
                <li><a href="#">我校开展“国家宪法日”主题活动</a></li>
                <li><a href="#">第三届“群英争霸”辩论赛圆满...</a></li>
                <li><a href="#">经济与管理学院特色班赴青州...</a></li>

            </ul>
        </div>

    </div>

    <div id="footer">
        <div id="hr"></div>
        <div id="foot_body">
            <div class="foot_qrcode">
                <div class="qrcode">
                    <img src="img/qrcode_footer.png" height="100" />

                    <div class="qr_title">
                        <h3>
                            手机访问
                        </h3>
                        <p>手机扫一扫即刻访问</p>
                    </div>
                </div>
                <div class="qrcode" style="float: right;margin-right: 100px;">
                    <img src="img/qrcode_footer.png" height="100" />

                    <div class="qr_title">
                        <h3>
                            官方微信
                        </h3>
                        <span>手机扫一扫，学校官方动态，不再错过，来体验微校园吧</span>
                    </div>
                </div>

            </div>

        </div>
        <div id="footer_content">
            <ul>
                <li>
                    <a href="#">关于我们</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">全站地图</a>
                </li>
                <li>
                    <a href="#">意见反馈</a>
                </li>
                <li>
                    <a href="#">人才招聘</a>
                </li>
                <li>
                    <a href="#">媒体报道</a>
                </li>
            </ul>
            <br />
            <center style="margin-top: 20px;color: #666;">
                Copyright © 课程设计网 2006-2016, All Rights Reserved.
            </center>
        </div>
    </div>

    <div id="goto">
        <a href="#">
            <img src="img/top.png" width="30" border="0" />
        </a>

    </div>

</body>

</html>